<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="bower_components/bootstrap-fileinput/css/fileinput.min.css">
    <script src="bower_components/jquery/dist/jquery.min.js"></script>
    <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
    <!--可排序的插件用于排序/重新排列初始预览-->
    <script src="bower_components/bootstrap-fileinput/js/plugins/sortable.min.js"></script>
    <!--purify插件可以在预览中安全的呈现HTML内容-->
    <script src="bower_components/bootstrap-fileinput/js/plugins/purify.min.js"></script>
    <script src="bower_components/bootstrap-fileinput/js/fileinput.min.js"></script>
    <script src="bower_components/bootstrap-fileinput/js/locales/LANG.js"></script>
    <script src="bower_components/bootstrap-fileinput/js/locales/zh.js"></script>
    <title>fileinput上传文件</title>
</head>
<style type="text/css">
    .header{
        margin-top: 100px;
        padding: 80px;
    }
</style>
<body>
<div class="header">
    <input id="input-b1" name="input-b1[]" type="file"  multiple/>
    <div style="width: 300px;height: 300px">
        <embed src="aa.pdf" width="100%" height="100%"/>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        // var url1 = 'http://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/FullMoon2010.jpg/631px-FullMoon2010.jpg',
        //     url2 = 'http://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/Earth_Eastern_Hemisphere.jpg/600px-Earth_Eastern_Hemisphere.jpg';
        // var url3="http://kartik-v.github.io/bootstrap-fileinput-samples/samples/small.mp4",
        //     url5= 'http://kartik-v.github.io/bootstrap-fileinput-samples/samples/pdf-sample.pdf',
        //     url4="view-source:https://web.qingtui.im/#/chat/contact/44b07cdd627c4ccf8ba5045127d32602";
        $("#input-b1").fileinput({
            // initialPreview: [
            //     //图像数据(jpg)
            //     url1,
            //     url2,
            //     //视频数据（mp4）
            //     url3,
            //     // HTML数据
            //    url4,
            //     url5,
            //     '<textarea class="kv-preview-data file-preview-text" readonly>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut mauris ut libero fermentum feugiat eu et dui. Mauris condimentum rhoncus enim, sed semper neque vestibulum id. Nulla semper, turpis ut consequat imperdiet, enim turpis aliquet orci, eget venenatis elit sapien non ante. Aliquam neque ipsum, rhoncus id ipsum et, volutpat tincidunt augue. Maecenas dolor libero, gravida nec est at, commodo tempor massa. Sed id feugiat massa. Pellentesque at est eu ante aliquam viverra ac sed est.</textarea>'
            // ],
            //  initialPreviewAsData: true,
            // initialPreviewFileType:"image",//图像是默认的，可以在下面的配置中重写
            // purifyHtml:true,//默认情况下会纯化HTML数据以进行预览
            // initialPreviewConfig:[
            //     {caption:"Moon.jpg",downloadUrl:url1,size:930321,width: "120px",key:1},
            //     {caption:"Earth.jpg",downloadUrl:url2,size:1218812,width: "120px",key:2},
            //     {type:"pdf",caption:"PDF-Sample.pdf",downloadUrl:url5,size:375000,width: "120px",key:5},
            //     {type: "text", size: 1430, caption: "LoremIpsum.txt",key: 3, downloadUrl: false}
            // ],
            // overwriteInitial: false,
            // maxFileSize:100,
            // initialCaption:"The Moon and the Earth",
            // previewClass:"bg-warning",
            language:"zh",
            textEncoding:'UTF-8',
            browseClass: "btn btn-success",
            browseLabel: "Select Folder",
            browseIcon: "<i class=\"glyphicon glyphicon-picture\"></i> ",
            removeClass: "btn btn-danger",
            removeLabel: "Delete",
            removeIcon: "<i class=\"glyphicon glyphicon-trash\"></i> ",
            uploadClass: "btn btn-info",
            uploadLabel: "Upload",
            uploadIcon: "<i class=\"glyphicon glyphicon-upload\"></i> ",
            // purfiyHtml:true,
            // minFileCount:2,
            // maxFileCount:5,

        })
    })
    // var url=''
    // $("input[type='file']").change(function () {
    //     console.log("changed!!!");
    //     var vm = this
    //     var file = this.files
    //     console.dir(file);
    //     if (window.FileReader) {
    //         var reader = new FileReader()
    //         reader.readAsDataURL(file[0]);
    //         reader.onloadend = function (ev) {
    //             url = ev.target.result;
    //             console.info("123")
    //             // localStorage.setItem("img",url);
    //         }
    //     }
    // })
    // var link = document.createElement('a');
    // link.innerHTML = 'download image';
    //
    // link.addEventListener('click', function(ev) {
    //     link.href = url;
    //     link.download = "test.png";
    // }, false);
    //
    // document.body.appendChild(link);
</script>
</body>
</html>